<template>
    <div class="item-image" :class="{'item-image-lock': data.price > 10}"><img v-if="data.url" v-lazy="data.url" alt=""></div>
</template>

<script>
export default {
    name: 'MaterialItem',
    props: {
        data: {
            type: Object,
            default() {
                return {};
            }
        }
    }
};
</script>

<style lang="less" scoped>
.item-image-lock {
    position: relative;
    &::after {
        content: '';
        background: url('http://dknight-1255433278.cossh.myqcloud.com/assets/lock.png') no-repeat;
        background-size: contain;
        width: 29px * 2;
        height: 29px * 2;
        position: absolute;
        right: 0;
        bottom: 7px * 2;
    }
}
</style>
